<template>
	<div class="detail-container">
		<div>
			<el-divider></el-divider>
			<h3 style="border-left: 5px solid #416ED9;padding-left: 5px;">存放地信息登记
			</h3>
			<el-row>
				<el-col :span="8">
					<span>业务编号：{{tbRelateItemOptTakeLog.caseNo}}</span>
				</el-col>
				<el-col :span="8">
					<span>办案单位：{{tbRelateItemOptTakeLog.createCompanyName}}</span>
				</el-col>
				<el-col style="height: 40px;" :span="8">
					<span>办案民警：{{tbRelateItemOptTakeLog.createUserName}}</span>
				</el-col>
				<el-col :span="8">
					<span>业务名称：{{tbRelateItemOptTakeLog.caseName}}</span>
				</el-col>
				<el-col :span="8">
					<span>办案部门：{{tbRelateItemOptTakeLog.createDepartmentName}}</span>
				</el-col>
				<el-col :span="8">
					<span>警号：{{tbRelateItemOptTakeLog.createUserNo}}</span>
				</el-col>
			</el-row>
			<el-divider></el-divider>
			<el-row>
				<el-button type="primary" icon="el-icon-plus" size="mini" :disabled="isSingle"
					@click="openSelectWmsContainerDialog">设置存放地信息</el-button>
			<!-- 	<el-button type="primary" icon="el-icon-edit" size="small" @click="">上传存放地凭证</el-button>
 -->
				<!--  <el-button type="infor" icon="el-icon-delete" size="small" @click="">删除附件</el-button> -->
				<!-- <el-col :span="15">
        <el-button v-hasPermission="['oms:tbRelateItemTakeDetail:take']" type="danger" icon="el-icon-plus" size="mini" :disabled="isMultiple" @click="handleTake">申请领取</el-button>
       <el-button v-hasPermission="['oms:tbRelateItemTakeDetail:borrow']" type="danger" icon="el-icon-plus" size="mini" :disabled="isMultiple" @click="handleBorrow">申请借用</el-button>
    <el-button type="danger" icon="el-icon-plus" size="mini" :disabled="isMultiple" @click="handleDeal">申请处理</el-button>
     </el-col> -->
			</el-row>
			<el-table ref="itemTable" :data="tbRelateItemOptTakeLog.items" style="width: 100%;margin-top: 10px" border
				highlight-current-row @selection-change="handleSelectionChange">

				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="序号" type="index" align="center" />
				<!--          qds-->
				<el-table-column label="物品编号" width="235" align="center">
					<template slot-scope="scope">
						{{ scope.row.serialNo }}
					</template>
				</el-table-column>
				<el-table-column label="物品名称" width="235" align="center">
          	<template slot-scope="scope">
					{{ scope.row.itemName }}
          	</template>
				</el-table-column>
				<!-- 	<el-table-column label="入库" align="center" show-overflow-tooltip width="90">
						<template slot-scope="scope">
							<el-button type="text" @click="openSelectWmsContainerDialog(scope.row)">操作</el-button>
						</template>
					</el-table-column> -->
				<el-table-column label="数量" width="100" align="center">
					<template slot-scope="scope">
						{{ scope.row.remainNumber }}
					</template>
				</el-table-column>
				<el-table-column label="单位" width="50" align="center">
					<template slot-scope="scope">
						{{ scope.row.unitName }}
					</template>
				</el-table-column>
				<el-table-column label="实物所在地" width="200" align="center">
					<template slot-scope="scope">{{ scope.row.currentStoreLocation }}	</template>
				</el-table-column>
				<el-table-column label="库架编号" align="center">
					<template slot-scope="scope">
						{{ scope.row.storeLotNo }}
					</template>
				</el-table-column>
    	<!-- <el-table-column label="RFID" width="135" align="center">
					<template slot-scope="scope">
						{{ scope.row.rfidCode }}
					</template>
				</el-table-column> -->
				<!--	        <el-table-column label="状态" align="center">-->
				<!--						<template slot-scope="scope">-->
				<!--							{{ scope.row.status |  receStatusFilter }}-->
				<!--						</template>-->
				<!--					</el-table-column>-->
				<el-table-column label="损耗数量" align="center">
					<template slot-scope="scope">
						{{ scope.row.lossNumber}}
						<!-- ￥{{ scope.row.lossNumber * scope.row.lossNumber }} -->
					</template>
				</el-table-column>
				<el-table-column label="备注" width="200" align="center">
					<template slot-scope="scope">
						<el-input size="small" v-model='scope.row.remark' placeholder="请输入备注" clearable
							@keyup.enter.native="updateRemark(scope.row)" />
					</template>
				</el-table-column>
			</el-table>
			<el-divider></el-divider>
			<el-row>
				<el-col :span="12">
					<span style="float: left;margin-left:1050px;width: 100%;">附件列表</span>
				</el-col>
			</el-row>

			<!--  <el-button v-hasPermission="['order:salesOrder:insert']" type="info" icon="el-icon-upload2" size="mini" @click="batchGenerateSettlement">选择生成结算单</el-button>
    -->
			<!-- 附件 -->
			<el-table ref="itemTable" :data="tbRelateItemOptTakeLog.attachments"
				style="width: 40%;margin-top: 20px;float: right;font-size: 15px;" border>
				<el-table-column label="序号" type="index" align="center" />
				<el-table-column label="附件名称" align="center">
					<template slot-scope="scope">
						{{ scope.row.name }}
					</template>
				</el-table-column>
				<el-table-column label="" align="center" show-overflow-tooltip width="90">
					<template slot-scope="scope">
						<el-button type="text" @click="relatedItemAttachmentview(scope.row)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" show-overflow-tooltip width="90">
					<template slot-scope="scope">
						<el-button type="text" @click="openPrintDialog(scope.row)">打印</el-button>
					</template>
				</el-table-column>
				<el-table-column label="" align="center" show-overflow-tooltip width="90">
					<template slot-scope="scope">
						<el-button type="text" @click="startDownload(scope.row)">下载</el-button>
					</template>
				</el-table-column>
				<!--          <el-table-column label="" align="center" show-overflow-tooltip width="90">-->
				<!--          	<template slot-scope="scope">-->
				<!--          		<el-button type="text" @click="deleteAttach(scope.row)">删除</el-button>-->
				<!--          	</template>-->
				<!--          </el-table-column>-->
			</el-table>


			</el-card>
		</div>

		<el-dialog :title="selectWmsContainerDialog.title" :visible.sync="selectWmsContainerDialog.visible"
			:close-on-click-modal="false" width="1200px" append-to-body>
			<div style="margin-bottom: 20px;">
				<el-select style="margin-right: 20px;" v-model="locationType">
				    <el-option
				      v-for="item in areaList"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				<el-button type="primary" icon="el-icon-search" size="medium" @click="handleWmsLocationQuery">查询</el-button>
			</div>

			<div class="container">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div style="display: flex;">
							<div style="margin-top: 10px;font-weight: bold;font-size: 18px ;">库架编号</div>
							<el-input size="small" v-model='selectWmsContainerDialogData.storeLotNo' style="width: 200px;margin: 0 20px;"
								placeholder="请选择库架编号" clearable />
								<el-button type="primary" icon="el-icon-thumb" size="medium" @click="confirmSelectWmsContainerDialog">确 定</el-button>
								<el-button @click="closeSelectWmsContainerDialog" icon="el-icon-close" size="medium">取 消</el-button>
						</div>
					</div>
					<el-row :gutter="12">
						<el-col v-for="item in storageTable" :span="4">
							<div @click="getTableData(item.locationNo,item.tier,item.lane)">
								<el-card class="box-card3" shadow="hover">
									<div slot="header" style="text-align: center;" class="clearfix">
										<span>{{item.locationNo}}</span>
									</div>
									<div class="fontSize">已装：{{item.currentLoad}} KG</div>
									<div class="fontSize">限重：{{item.maxLoad}} KG</div>
									<el-progress :color="customColors" class="progress" :percentage="percentage">
									</el-progress>
								</el-card>
							</div>
						</el-col>
					</el-row>
					<pagination v-show="page.total>0" :total="page.total" :page.sync="page.current"
						:limit.sync="page.pageSize" @pagination="handleWmsLocationQuery" />

				</el-card>
				<el-card class="box-card1">
					<div slot="header" class="clearfix">
						<span style="margin: 0 auto;">{{clearlyTitle + ' '}}库位详细</span>
					</div>

					<el-table :data="tableData" height="100vh" border stripe style="width: 100%">
						<el-table-column prop="materialName" align="center" label="物品名称">
						</el-table-column>
						<el-table-column prop="quantity" align="center" label="数量">
						</el-table-column>
					</el-table>
				</el-card>
			</div>

			<div slot="footer" class="dialog-footer">
				<!-- 		<el-button type="primary" @click="confirmSelectWmsContainerDialog">确 定</el-button>
				<el-button @click="closeSelectWmsContainerDialog">取 消</el-button> -->
			</div>
		</el-dialog>

		<el-dialog :title="tbRelateItemTakeDialog.title" :visible.sync="tbRelateItemTakeDialog.visible"
			:close-on-click-modal="false" width="500px" append-to-body>
			<el-form :model="tbRelateItemTakeDialogData" label-position="right" label-width="120px" class="dialog_form">
				<!--  <el-form-item label="选择领取单位:">
           <el-select v-model="tbRelateItemTakeDialogData.backCompanyCode" placeholder="请选择三方服务商" clearable size="small">
             <el-option v-for="option in options.supplierIdOptions" :key="option.supplierName" :label="option.supplierName" :value="option.supplierName" />
           </el-select>
         </el-form-item> -->
				<el-form-item label="选择领取单位:" prop="backDepartmentCode">
					<treeselect v-model="tbRelateItemTakeDialogData.backDepartmentCode" :options="options.orgOptions"
						:show-count="true" placeholder="请选择领取单位" />
				</el-form-item>
				<el-form-item label="选择领取人:" prop="backUserNo">
					<el-select v-model="tbRelateItemTakeDialogData.backUserNo" placeholder="请选择领取人" filterable clearable
						size="mini">
						<el-option v-for="option in options.userOptions" :key="option.id" :label="option.userName"
							:value="option.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="领取事由:">
					<el-select v-model="tbRelateItemTakeDialogData.takeReason" placeholder="请选择领取事由" filterable
						clearable size="mini">
						<el-option v-for="option in options.reasonOptions" :key="option.key" :label="option.label"
							:value="option.key" />
					</el-select>
				</el-form-item>
				<el-table :data="tbRelateItemTakeDialogData.items" highlight-current-row
					@selection-change="handleSelectionChange">
					<el-table-column label="物品编号" align="center" prop="serialNo" show-overflow-tooltip />
					<el-table-column label="物品可用数量" align="center" prop="number" show-overflow-tooltip />
					<el-table-column label="领取数量" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-input v-model="scope.row.num" placeholder="请输入数量" />
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="itemTakepreview">预 览</el-button>
				<el-button type="primary" @click="confirmTbRelateItemTakeDialog">确 定</el-button>
				<el-button @click="resetTbRelateItemTakeDialog">取 消</el-button>
			</div>
		</el-dialog>

		<el-dialog :title="tbRelateItemBorrowDialog.title" :visible.sync="tbRelateItemBorrowDialog.visible"
			:close-on-click-modal="false" width="500px" append-to-body>
			<el-form :model="tbRelateItemBorrowDialogData" label-position="right" label-width="120px"
				class="dialog_form">
				<!--  <el-form-item label="选择领取单位:">
           <el-select v-model="tbRelateItemTakeDialogData.backCompanyCode" placeholder="请选择三方服务商" clearable size="small">
             <el-option v-for="option in options.supplierIdOptions" :key="option.supplierName" :label="option.supplierName" :value="option.supplierName" />
           </el-select>
         </el-form-item> -->
				<el-form-item label="选择借用单位:" prop="backDepartmentCode">
					<treeselect v-model="tbRelateItemBorrowDialogData.backDepartmentCode" :options="options.orgOptions"
						:show-count="true"  placeholder="请选择领取单位" />
				</el-form-item>
				<el-form-item label="选择借用人:" prop="backUserNo">
					<el-select v-model="tbRelateItemBorrowDialogData.backUserNo" placeholder="请选择借用人" filterable
						clearable size="mini">
						<el-option v-for="option in options.userOptions" :key="option.id" :label="option.userName"
							:value="option.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="借用事由:">
					<el-select v-model="tbRelateItemTakeDialogData.borrowReason" placeholder="请选择事由" filterable
						clearable size="mini">
						<el-option v-for="option in options.reasonOptions" :key="option.key" :label="option.label"
							:value="option.key" />
					</el-select>
				</el-form-item>
				<el-table :data="tbRelateItemBorrowDialogData.items" highlight-current-row
					@selection-change="handleSelectionChange">
					<el-table-column label="物品编号" align="center" prop="serialNo" show-overflow-tooltip />
					<el-table-column label="物品可用数量" align="center" prop="number" show-overflow-tooltip />
					<el-table-column label="借用数量" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-input v-model="scope.row.num" placeholder="请输入数量" />
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="itemBorrowPreview">预 览</el-button>
				<el-button type="primary" @click="confirmTbRelateItemBorrowDialog">确 定</el-button>
				<el-button @click="resetTbRelateItemBorrowDialog">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import TbWmsMaterialReceiptApi from '@/api/web/TbWmsMaterialReceiptApi'
import TbWmsMaterialReceiptLineApi from '@/api/web/TbWmsMaterialReceiptLineApi'

	import TbWmsLocationApi from '@/api/web/TbWmsLocationApi'
	import TbWmsMaterialInLocationApi from '@/api/web/TbWmsMaterialInLocationApi'
	import CustomerApi from '@/api/basic/CustomerApi'
	import UserApi from '@/api/system/UserApi'
	import SysOrgApi from '@/api/system/OrgApi'
	import Treeselect from '@riophae/vue-treeselect'
	import AuthUtils from '@/utils/AuthUtils'
	import appConstant from '@/constant/AppConstant'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		name: 'TbWmsMaterialReceiptView',
		filters: {
			receStatusFilter(item) {
				const values = appConstant.receStatusList.filter(value => value.key === item)
				if (values && values.length > 0) {
					return values[0].label
				} else {
					return ''
				}
			}
		},
		components: {
			Treeselect
		},
		data() {
			return {
				options: {
					orderTypeOptions: [],
					sourceTypeOptions: [],
					tbRelateItemOptTakeLogStatusOptions: [],
					salesManOptions: [],
					payTypeOptions: [],
					goodsOptions: [],
					reasonOptions: appConstant.reasonList,
					customerOptions: [],
					regionOptions: [],
					orgOptions: [], // 组织树选项
					userOptions: [],
					expressCompanyOptions: []
				},
				page: {
					current: 1,
					pageSize: 24,
					total: 0,
					records: []
				},
				selectWmsContainerDialog: {
					title: '选择库位',
					visible: false
				},
				selectWmsContainerDialogData: {
					storeLotNo: null,
					rfid: null,
					id: null
				},
				storageTable: [],
				tableData: [],
				clearlyTitle: '',
				percentage: 23.9,
				areaList: [{
						value: '轻型物品区',
						label: '轻型物品区'
					},
					{
						value: '普通物品区',
						label: '普通物品区'
					},
					{
						value: '贵重物品区',
						label: '贵重物品区'
					},
					{
						value: '重型物品区',
						label: '重型物品区'
					},
					{
						value: '超规物品区',
						label: '超规物品区'
					},
				],
				locationType: '轻型物品区',
				customColors: [{
						color: '#1989fa',
						percentage: 55
					},
					{
						color: '#e6a23c',
						percentage: 60
					},
					{
						color: '#e6a23c',
						percentage: 79
					},
					{
						color: '#f56c6c',
						percentage: 80
					},
					{
						color: '#f56c6c',
						percentage: 100
					}
				],
				//   locationRecords: [],
				//    storageCompanyCode,
				tbRelateItemBorrowDialog: {
					title: '',
					visible: false
				},
				tbRelateItemBorrowDialogData: {
					backDepartmentCode: null,
					backUserNo: null,
					borrowReason: null,
					items: [],
					ids: null,
					nums: null
				},
				tbRelateItemTakeDialog: {
					title: '',
					visible: false
				},
				tbRelateItemTakeDialogData: {
					backDepartmentCode: null,
					backUserNo: null,
					takeReason: null,
					items: [],
					ids: null,
					nums: null
				},
				tbRelateItemOptTakeLog: {
					items: []
				},
				multipleSelection: [],
				isSingle: true,
				isMultiple: true
			}
		},
		computed: {
			/* batchNo() {
			   return this.$route.params.batchNo
			 } */
		},
		created() {
			//  this.init()
			//  this.loadOptions()
			const id = this.$route.params.id
			if (id) {
				TbRelateItemOptTakeLogApi.get(id).then(response => {
					this.tbRelateItemOptTakeLog = response.data

				})
			}
		},

		methods: {
			init() {
				TbRelateItemOptTakeLogApi.getByBatchNo(this.batchNo).then(response => {
					this.tbRelateItemOptTakeLog = response.data
				})
			},

			handleQuery() {
				const id = this.$route.params.id
				if (id) {
					TbRelateItemOptTakeLogApi.get(id).then(response => {
						this.tbRelateItemOptTakeLog = response.data

					})
				}
			},
			loadOptions() {
				/* 	DictValueApi.list({
						dictCode: 'oms_sales_order_type'
					}).then(response => {
						this.options.orderTypeOptions = response.data
					})
					DictValueApi.list({
						dictCode: 'oms_sales_order_source'
					}).then(response => {
						this.options.sourceTypeOptions = response.data
					})
					DictValueApi.list({
						dictCode: 'oms_sales_order_status'
					}).then(response => {
						this.options.tbRelateItemOptTakeLogStatusOptions = response.data
					}) */

				/* 	UserApi.roleUsers({
						roleId: '1356074716665876480'
					}).then(response => {
						this.options.salesManOptions = response.data
					})
					CustomerApi.list().then(response => {
						this.options.customerOptions = response.data
					})
					RegionApi.tree().then(response => {
						this.options.regionOptions = this.$common.list2Tree(response.data)
					}) */
				SysOrgApi.treeSelect().then(response => {
					this.options.orgOptions = response.data
				})
				this.queryParams.customerId = this.tbRelateItemTakeDialogData.backDepartmentCode
				UserApi.list(this.queryParams).then(response => {
					this.options.userOptions = response.data
				})
				/* 	ExpressCompanyApi.list().then(response => {
						this.options.expressCompanyOptions = response.data
					}) */
			},
			/* 	stepStatusFormat(orderStatus) {
					if (orderStatus === 'created') {
						return 2
					}
					if (orderStatus === 'submitted') {
						return 3
					}
					if (orderStatus === '40') {
						return 4
					}
					if (orderStatus === 'confirmed') {
						return 5
					}
					if (orderStatus === '60') {
						return 6
					}
					if (orderStatus === 'delivery_plan') {
						return 7
					}
					if (orderStatus === 'delivered') {
						return 8
					}
					if (orderStatus === 'completed') {
						return 9
					}
					return 1
				}, */
			/* orderStatusFormat(status) {
				return this.$common.getDictValueName(this.options.tbRelateItemOptTakeLogStatusOptions, status)
			},
			orderTypeFormat(type) {
				return this.$common.getDictValueName(this.options.orderTypeOptions, type)
			},
			sourceTypeFormat(type) {
				return this.$common.getDictValueName(this.options.sourceTypeOptions, type)
			},
			payTypeFormat(type) {
				return this.$common.getDictValueName(this.options.payTypeOptions, type)
			}, */
			getTableData(e, a, b) {
				this.selectWmsContainerDialogData.storeLotNo = e
				TbWmsMaterialInLocationApi.list({
					locationNo: e
				}).then(response => {
					this.tableData = response.data
					this.clearlyTitle = e
					console.log(response.data)
				})
			},
			updateRemark(tbRelateItemOptTakeDetail) {
				debugger
				TbRelateItemOptTakeDetailApi.edit(tbRelateItemOptTakeDetail).then(response => {
					console.log(response.data)
				})
			},
			/* 	openSelectWmsContainerDialog(row) { */
			/* const params = {
			   storageCompanyCode: this.tbRelateItemOptTakeLog.storageCompanyCode,

			}
			TbWmsLocationApi.list(params).then(response => {
			   this.locationRecords = response.data.records

			 } */
			openSelectWmsContainerDialog() {

				const id = this.multipleSelection.map(item => item.id)[0]
				const rfid = this.multipleSelection.map(item => item.rfidCode)[0]
				const status = this.multipleSelection.map(item => item.status)[0]

				if (status === 'inWarehouse') {
					this.$alert("已登记存放地址信息，不可再次登记。可作移位操作");
					return false;
				}
				this.selectWmsContainerDialogData.id = id;
				this.selectWmsContainerDialogData.rfid = rfid;
				//this.selectWmsContainerDialogData.rfid = row.rfidCode;
				this.selectWmsContainerDialog.visible = true;
				this.selectWmsContainerDialog.title = '选择存放地';
				this.handleWmsLocationQuery();
			},

			handleWmsLocationQuery() {
				if (this.selectWmsContainerDialogData.storeLotNo != null && this.selectWmsContainerDialogData.storeLotNo !=
					"") {
					TbWmsLocationApi.page({
						LOCATION_TYPE: this.locationType,
						locationNo: this.selectWmsContainerDialogData.storeLotNo
					}, this.page).then(response => {
						this.storageTable = response.data.records
						this.page.total = response.data.total
						this.loading = false
					})
				} else {
					TbWmsLocationApi.page({
						LOCATION_TYPE: this.locationType
					}, this.page).then(response => {
						this.storageTable = response.data.records
						this.page.total = response.data.total
						this.loading = false
					})
				}
			},
			closeSelectWmsContainerDialog() {
				this.selectWmsContainerDialog.visible = false
			},
			confirmSelectWmsContainerDialog() {
				if (!this.selectWmsContainerDialogData.rfid) {
					this.$message.success('射频标签没有绑定，请先处理！')
					return false;
				}
				if (this.selectWmsContainerDialogData.storeLotNo) {
					TbRelateItemOptTakeDetailApi.inBoundWarehouse(this.selectWmsContainerDialogData).then(response => {
						this.$message.success('入库操作成功')
						this.selectWmsContainerDialog.visible = false
						this.handleQuery()
					})
				} else {
					this.$alert("必须选择库位");
				}
			},
			handleSelectionChange(selection) {
				this.multipleSelection = selection
				this.isSingle = selection.length !== 1
				this.isMultiple = !selection.length
			},
			handleInWhBtnShow: function(status) {
				const validStatusList = ['acc_failed']
				const index = validStatusList.indexOf(status)
				if (index === -1) {
					return false
				} else {
					return true
				}
			},
			handleDeal() {
				const ids = this.multipleSelection.map(item => item.id)
				this.$router.push({
					path: `/relateItemDealLog/relateItemDeal/${ids}`
				})
			},
			handleBorrow() {
				const ids = this.multipleSelection.map(item => item.id)
				this.$router.push({
					path: `/relateItemBorrowLog/relateItemBorrow/${ids}`
				})
			},
			handleTake() {
				const ids = this.multipleSelection.map(item => item.id)
				this.$router.push({
					path: `/relateItemTakeLog/relateItemTake/${ids}`
				})
			},
			confirmTbRelateItemBorrowDialog() {
				this.tbRelateItemBorrowDialogData.ids = this.tbRelateItemBorrowDialogData.items.map(item => item.id)
				this.tbRelateItemBorrowDialogData.nums = this.tbRelateItemBorrowDialogData.items.map(item => item.num)
				TbRelateItemTakeDetailApi.borrow(this.tbRelateItemBorrowDialogData).then(response => {
					this.$message.success('借用成功')
					this.tbRelateItemBorrowDialog.visible = false
					this.handleQuery()
				})
			},
			confirmTbRelateItemTakeDialog() {
				this.tbRelateItemTakeDialogData.ids = this.tbRelateItemTakeDialogData.items.map(item => item.id)
				this.tbRelateItemTakeDialogData.nums = this.tbRelateItemTakeDialogData.items.map(item => item.num)
				TbRelateItemTakeDetailApi.take(this.tbRelateItemTakeDialogData).then(response => {
					this.$message.success('领取成功')
					this.tbRelateItemTakeDialog.visible = false
					this.handleQuery()
				})
			},
			resetTbRelateItemBorrowDialog() {
				this.tbRelateItemBorrowDialog.visible = false
				this.tbRelateItemBorrowDialogData.backDepartmentCode = null
				this.tbRelateItemBorrowDialogData.backUserNo = null
				this.tbRelateItemBorrowDialogData.borrowReason = null
				this.tbRelateItemBorrowDialogData.items = null
				this.tbRelateItemBorrowDialogData.ids = null
				this.tbRelateItemBorrowDialogData.nums = null
			},
			resetTbRelateItemTakeDialog() {
				this.tbRelateItemTakeDialog.visible = false
				this.tbRelateItemTakeDialogData.backDepartmentCode = null
				this.tbRelateItemTakeDialogData.backUserNo = null
				this.tbRelateItemBorrowDialogData.takeReason = null
				this.tbRelateItemTakeDialogData.items = null
				this.tbRelateItemTakeDialogData.ids = null
				this.tbRelateItemTakeDialogData.nums = null
			},
			itemTakepreview() {
				// this.tbRelateItemTakeDialogData

			},
			itemBorrowPreview() {
				// this.tbRelateItemBorrowDialogData
			}
			/* expressInfoFormat(tbRelateItemOptTakeLog) {
				const expressCompanyName = tbRelateItemOptTakeLog.expressCompanyName ? tbRelateItemOptTakeLog
					.expressCompanyName : ''
				const expressNo = tbRelateItemOptTakeLog.expressNo ? tbRelateItemOptTakeLog.expressNo : ''
				return expressCompanyName + ' ' + expressNo
			} */
		}
	}
</script>
<style scoped>
	.detail-container {
		width: 95%;
		/* 	//padding: 20px 20px 20px 20px; */
		margin: 0px auto;
	}

	span {
		font-weight: bold;
		font-size: 13px;
	}

	.operate-container {
		background: #F2F6FC;
		height: 80px;
		margin: -20px -20px 0;
		line-height: 80px;
	}

	.operate-button-container {
		float: right;
		margin-right: 20px
	}


	.table-cell {
		height: 60px;
		line-height: 40px;
		border-right: 1px solid #DCDFE6;
		border-bottom: 1px solid #DCDFE6;
		padding: 10px;
		font-size: 14px;
		color: #606266;
		text-align: center;
		overflow: hidden;
	}

	.table-cell-title {
		border-right: 1px solid #DCDFE6;
		border-bottom: 1px solid #DCDFE6;
		padding: 10px;
		background: #F2F6FC;
		text-align: center;
		font-size: 14px;
		color: #303133;
	}

	.container {

		display: flex;

	}

	.fontSize {
		font-size: 12px;
		letter-spacing: 2px;
		padding: 2px;
	}

	.box-card {
		width: 75%;
		/* height: 100vh; */

	}

	.box-card1 {
		width: 25%;
		margin-left: 30px;
	}

	.box-card3 {
		width: 130px;
		background: #fafafa;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.progress {
		width: 120%;
	}
</style>
